/**
 * js2table.js 使用示例
 * 包含各种场景下的表格配置示例
 */

// 基础表格配置示例
export const basicTableConfig = {
  columnsNum: 2, // 表格列数
  data: [
    [
      { 
        label: '姓名', 
        value: '张三',
        labelStyle: { fontWeight: 'bold', backgroundColor: '#f5f5f5' },
        valueStyle: { color: '#333' }
      },
      { 
        label: '年龄', 
        value: '25',
        valueConfig: { colspan: 1 }
      }
    ],
    [
      { 
        label: '职业', 
        value: '工程师',
        labelStyle: { textAlign: 'center' }
      },
      { 
        label: '城市', 
        value: '北京',
        valueStyle: { fontStyle: 'italic' }
      }
    ]
  ]
};

// 带标题和页眉页脚的表格配置
export const fullFeaturedTableConfig = {
  title: { 
    text: '员工信息表',
    style: { fontSize: '18px', color: '#1890ff', textAlign: 'center' }
  },
  columnsNum: 2,
  header: [ // 页眉配置
    { 
      label: '部门', 
      value: '技术部',
      labelStyle: { fontWeight: 'bold' },
      parentStyle: { marginRight: '20px' }
    },
    { 
      label: '日期', 
      value: '2023-06-01',
      valueStyle: { color: '#666' }
    }
  ],
  footer: [ // 页脚配置
    { 
      label: '制表人', 
      value: 'HR',
      labelStyle: { fontSize: '12px' }
    },
    { 
      label: '备注', 
      value: '机密',
      valueStyle: { color: 'red' }
    }
  ],
  data: [
    [
      { 
        label: '姓名', 
        value: '李四',
        labelConfig: { colspan: 1 }
      },
      { 
        label: '工号', 
        value: '1001',
        valueStyle: { fontFamily: 'monospace' }
      }
    ],
    [
      { 
        label: '职位', 
        value: '前端开发',
        labelStyle: { textDecoration: 'underline' }
      },
      { 
        label: '薪资', 
        value: '****',
        valueStyle: { letterSpacing: '2px' }
      }
    ]
  ]
};

// 嵌套表格配置示例
export const nestedTableConfig = {
  columnsNum: 1,
  data: [
    [
      {
        mode: 'NewTable',
        title: '项目组成员',
        columnsNum: 2,
        header: [
          { label: '项目', value: 'CRM系统' }
        ],
        data: [
          [
            { 
              label: '姓名', 
              value: '王五',
              labelStyle: { backgroundColor: '#f0f0f0' }
            },
            { 
              label: '角色', 
              value: '项目经理',
              valueStyle: { fontWeight: 'bold' }
            }
          ],
          [
            { 
              label: '姓名', 
              value: '赵六',
              labelStyle: { backgroundColor: '#f0f0f0' }
            },
            { 
              label: '角色', 
              value: 'UI设计师',
              valueStyle: { color: '#666' }
            }
          ]
        ]
      }
    ]
  ]
};

// 列表表格配置示例
export const listTableConfig = {
  columnsNum: 1,
  data: [
    [
      {
        mode: 'NewList',
        data: {
          columns: [
            { 
              label: '产品名称', 
              width: 40,
              align: 'left|left',
              style: { backgroundColor: '#f5f5f5' }
            },
            { 
              label: '价格', 
              width: 30,
              align: 'center|right'
            },
            { 
              label: '库存', 
              width: 30,
              align: 'center|center'
            }
          ],
          list: [
            ['手机', '¥3999', '100'],
            ['笔记本', '¥6999', '50'],
            ['平板电脑', '¥2999', '80']
          ]
        }
      }
    ]
  ]
};

// 意见表格配置示例
export const opinionTableConfig = {
  columnsNum: 1,
  data: [
    [
      {
        mode: 'Opinion',
        data: [
          {
            label: '领导意见',
            value: '同意该项目实施，请相关部门配合执行。',
            valueStyle: { minHeight: '60px' },
            signLabel: '签字：',
            sign: '张总',
            timeLabel: '日期：',
            time: '2023-06-15'
          },
          {
            label: '部门意见',
            value: '已做好相关准备，可以按计划推进。',
            valueStyle: { minHeight: '60px' },
            sign: '李经理',
            time: '2023-06-14'
          }
        ]
      }
    ]
  ]
};

// 特殊模式表格配置示例
export const specialModeTableConfig = {
  columnsNum: 2,
  data: [
    [
      { 
        label: '产品图片',
        value: '产品图片',
        valueMode: 'img',
        valueModeUrl: 'https://example.com/product.jpg',
        valueModeStyle: { width: '100px', height: '100px' }
      },
      { 
        label: '产品链接',
        value: '查看详情',
        valueMode: 'link',
        valueModeUrl: 'https://example.com/product',
        valueModeStyle: { color: '#1890ff' }
      }
    ],
    [
      { 
        label: '选择颜色',
        value: '',
        valueMode: 'radio',
        valueModeOptions: [
          { label: '红色', value: 'red' },
          { label: '蓝色', value: 'blue' },
          { label: '绿色', value: 'green' }
        ],
        valueModeValue: 'blue',
        valueModeStyle: { marginRight: '10px' },
        valueModeRadioName: 'colorSelection',
        valueConfig: { colspan: 2 }
      }
    ],
    [
      { 
        label: '选择配件',
        value: '',
        valueMode: 'checkbox',
        valueModeOptions: [
          { label: '保护壳', value: 'case' },
          { label: '贴膜', value: 'film' },
          { label: '充电器', value: 'charger' }
        ],
        valueModeValue: ['case', 'film'],
        valueModeStyle: { marginRight: '10px' },
        valueModeCheckboxName: 'accessorySelection',
        valueConfig: { colspan: 2 }
      }
    ]
  ]
};

// 不同纸张尺寸配置示例
export const pageSizeTableConfig = {
  pageMode: 'A3-landscape', // A3横向
  columnsNum: 3,
  data: [
    [
      { label: '指标', value: 'Q1' },
      { label: '销售额', value: '¥100万' },
      { label: '增长率', value: '10%' }
    ],
    [
      { label: '指标', value: 'Q2' },
      { label: '销售额', value: '¥120万' },
      { label: '增长率', value: '20%' }
    ],
    [
      { label: '指标', value: 'Q3' },
      { label: '销售额', value: '¥150万' },
      { label: '增长率', value: '25%' }
    ]
  ]
};

// 使用示例
/*
import { generateTable } from './js2table';
import { basicTableConfig } from './js2table.example';

// 生成表格
const tableElement = generateTable(basicTableConfig);

// 添加到DOM
document.body.appendChild(tableElement);
*/